<template>
    <div class="top-nav">
        <img :src="props.info.logo" alt="logo">
        <!-- <img src="@/assets/my-logo-all.svg" alt="logo"> -->
        <el-space :size="0" :spacer="spacer" class="mid-nav">
            <router-link to="/index">首页</router-link>
            <router-link to="/main">云导航</router-link>
        </el-space>
        <div class="control">
            <span v-show="time">{{ timeStr }}</span>
            <el-switch v-model="isDark" inline-prompt active-text="黑夜" inactive-text="白天" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { h, onBeforeMount, ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useDark, useDateFormat } from '@vueuse/core'
import { ElDivider } from 'element-plus'
import useSystem from '@/store/useSystem'

const isDark = useDark()
const spacer = h(ElDivider, { direction: 'vertical' })
const time = ref(0)
const start = ref(0)
const system = useSystem()

function serverTime() {
    time.value = system.time
    timeStart()
}
const props = defineProps<{ info: SystemModel }>()

function timeStart() {
    // 使用 performance.now() 精度较高
    const timestamp = performance.now()
    time.value = time.value + timestamp - start.value
    start.value = timestamp
    requestAnimationFrame(timeStart)
}
function pageEvent() {
    // 当浏览器切换到前台时重新与服务器对时
    if (document.visibilityState == 'visible') {
        serverTime()
    }
}

onBeforeMount(() => {
    serverTime()
})
onMounted(() => {
    document.addEventListener('visibilitychange', pageEvent)
})
onBeforeUnmount(() => {
    document.removeEventListener('visibilitychange', pageEvent)
})

const timeStr = computed(() => {
    return useDateFormat(time.value, "YYYY年MM月DD日 HH:mm:ss").value
})
</script>

<style lang="scss" scoped>
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 20px;
    gap: 20px;
    border-bottom: 1px solid var(--el-border-color);
    font-size: 14px;

    img {
        height: 32px;
    }

    .mid-nav {
        flex: 1;
        justify-content: center;

        a {
            display: block;
            padding: 5px 10px;

            &:hover {
                background: var(--el-menu-hover-bg-color);
                color: var(--el-menu-hover-text-color);
            }
        }

        .router-link-exact-active {
            color: var(--el-menu-active-color);
            background: var(--el-menu-hover-bg-color);

            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -2px;
                display: block;
                width: 100%;
                height: 2px;
                background: var(--el-menu-active-color);
            }
        }
    }

    .control {
        @media screen and (max-width:768px) {
            display: none;
        }

        display: flex;
        gap: 10px;
        justify-content: space-around;
        align-items: center;
    }
}
</style>@/store/useSystem